<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
</head>
<style>
html,body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

</style>
<body>
<div id="main" style="width: 100%;height:100%;"></div>
<button onclick="putRandomData()" style="position: absolute;right: 0;top: 0;">添加随机数据</button>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例

function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    }
}

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;

var myChart = echarts.init(document.getElementById('main'));
option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};
var maxDataLength = 100;
myChart.setOption(option);

function putRandomData(){
	if(data.length>=maxDataLength){
         data.shift();
    }
	var obj = randomData();
    console.log(obj);
    data.push(obj);
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}
function putData(time,num){
	console.log(1);
	var obj = {
		name:time,
		value:[time,num]
	}
	//var obj = JSON.parse(str);
	console.log(obj);
	if(data.length>=maxDataLength){
        data.shift();
   }
   data.push(obj);
   myChart.setOption({
       series: [{
           data: data
       }]
   });
}

</script>
</body>
</html>